Material Design 3 · 布局、导航和交互
交互设计 · 第 11 讲
👉 MD 3 · 布局、导航和交互👈
首先，我们还是全览一下MD材料基础中有哪些内容：
按照我对材料基础的理解，我把左边13类概括成了3大类：视觉类，不常用，和交互必学。
▲图3 布局中的知识要点
列：内容放置在单/多列的屏幕区域中。列宽是用屏幕的百分比定义的，而不是固定值。
水槽：列之间的间距，在断点范围内，水槽宽度是固定的，断点改变，水槽的宽度可以改变。屏幕越宽，水槽也越宽。
边距：内容与屏幕左右边缘之间的距离。边距宽度用每个断点范围的固定值或缩放值定义。
1.2 断点
断点是在特定布局要求下的屏幕尺寸阈值。
在给定的断点范围内，布局会自动调整以适应屏幕大小和方向。
Material Design 提供基于 4 列、8 列和 12 列网格的响应式布局，可用于不同的屏幕、设备和方向。每个断点范围内有确定的列数，以及每种显示尺寸的推荐边距和间距。
1.3 基线网格
基线网格是版式设计的基础，它的作用在于精确创建和编辑对象，为版面的编排提供一种视觉参考和构架基准。
在基线网格的布局中，移动设备、平板电脑和台式机中所有的组件都与 8dp 方形的基线网格对齐。组件中的图标、文字和某些元素可以与 4dp 网格对齐。文字可以与4dp基线对齐，也可以在组件中居中，放置在4dp之外。
间距法是一组关于如何在页面和组件中放置元素的规则，它用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。
内间距Padding：组件内元素之间的距离，以 8dp 或 4dp 为增量进行测量。
尺寸Dimensions：组件元素的宽度和高度，它们应与8dp 网格对齐。
对齐Alignment：组件内元素的放置方式。
关键线Keylines：一种对齐工具，垂直线，显示元素与网格对齐时的放置位置。关键线由每个元素与屏幕边缘的距离决定，并以 8dp 为增量进行测量。
1.4 容器
容器表示封闭区域的形状，可以用来存放 UI 元素，例如图像、图标或面。
▲图8 容器
容器可可以分为两类：刚性容器和灵活容器。刚性容器尺寸固定，不随图像大小变化而变化，图像超出容器会被裁减。灵活容器尺寸可变，容器随图像大小变化而变化，始终保持图像在容器内。
1.6 纵横比
纵横比是元素的宽度与其高度的比例。
纵横比=宽度：高度。
建议在整个 UI 中使用以下纵横比：16:9；3:2; 4:3；1:1; 3:4；2:3。为了保持布局的一致性，设计师在图像、面和屏幕尺寸等元素上建议使用一致的纵横比。
在响应式网格布局中，除了固定的纵横比，还可以采用灵活比率，容器宽度由屏幕布局决定，并逐渐增大以填充可用的最大空间。容器高度由容器中图像的高度决定。
1.7 响应式裁减
响应式裁减定义在不同的断点范围内裁剪图像的规则，以响应式的显示图像。
响应式裁减有3种裁减方式：
1、保持固定比例；2、自定义不同的比例；3、固定图像高度。
在设计时，大家可以根据图片的目的和重要性进行选择。
1.8 触摸目标
为了平衡信息密度和可用性，触摸目标应至少为 48 x 48 dp，目标之间至少有 8dp 的空间。
关于导航，我们主要介绍导航的类型、转换方式和搜索。
横向导航：指引用户在同一层次的页面之间移动，它可以通过导航抽屉、底部导航和Tab栏实现。
前向导航：让用户在连续的层次结构、流程中的步骤或跨应用程序的屏幕之间移动。前向导航将导航行为嵌入到容器、按钮、链接或使用搜索中。
反向导航：按时间顺序或任务流程向后移动屏幕，通常由操作系统或平台提供。反向时间导航是指以相反的顺序在用户最近查看的屏幕的历史中导航；向上导航允许用户在单个应用的层次结构中向上导航一级，直到到达应用的主屏幕或顶级屏幕。
应用程序的导航转换有3种类型：。
在横向导航的底部导航转换时，采用的是顶层转换，也就是淡入淡出模式过渡。在横向导航的顶部Tab栏转换时，采用的是兄弟转换，平行移动的方式过渡。在前向导航和反向导航时，采用的是父子转换，比如点击放大/缩小，向右/向左覆盖的方式过渡。
搜索允许用户快速找到应用内容。用户在搜索框中输入关键字，点击查询得到相关结果。在App中有两种常见的搜索形态：置顶搜索和可拓展搜索。
当搜索是应用程序的高频功能时，使用置顶搜索。
置顶搜索框内有搜索提示，点击搜索框，搜索页面会扩大到全屏，可以在搜索框下方显示历史记录。用户可以键入关键字或从选择联想内容提交搜索。搜索结果显示在搜索栏下方。用户点击向上箭头，要从搜索框中释放焦点并关闭搜索建议。
▲图16 可拓展搜索
▲图17 搜索流程的几个状态
手势让用户可以通过触摸与屏幕元素进行直接交互。
关于手势设计，有3个设计原则：
1、手势让用户通过触摸去执行任务。
2、手势允许用户以不精确的操作执行。
3、手势允许用户通过触摸直接更改 UI 元素。
当用户与产品进行手势交互时，还需要做到以下3点：
1、操作前：有手势的暗示，比如用可见的界面元素或行为来表明可以对它们执行手势。
2、操作时实时响应，操作元素要马上发生状态变化，以表达用户对触摸交互的直接控制。
3、操作后实时体现对手势类型的响应。
在移动App中，手势可帮助用户在视图之间导航、采取行动和操作内容。我们可以把手势分为3大类：导航手势，动作手势和变换手势。
导航手势可以帮助用户轻松浏览产品。常用的导航手势包括：轻敲、滚动和平移、拖、滑动、捏。
动作手势可以执行动作或提供完成动作的快捷方式。动作手势包括：轻敲、长按、滑动。
变换手势让用户可以通过手势变换元素的大小、位置和旋转。变换手势包括：双击、捏、复合手势、拿起并移动。
3.2 状态
状态是对组件或交互元素现状的可视化呈现。元素的每个状态都应该在视觉上相似但又与环境中其他状态有明显区分。
互联网产品中组件的状态包括：默认（启用）态、禁用态、悬停态、焦点态、按下态、拖动态、选中态、激活态、开启态、关闭态和错误状态。
作为交互设计师，我们在设计任何一个可交互的组件时，都需要考虑其多种状态的设计，不能遗漏，这是对交互设计的基本要求。
状态设计有3大原则：
1、一致性：同一组件的状态应该具备一致性，让大家能很容易理解其只是状态发生了变化。
2、状态有优先级，不同优先级的状态有显著的视觉区分。
3、同时显示：当一个组件触发多种状态时，多种状态要同时显示，如选择和悬停。
我们可以通过以下几种方式来变化交互组件的状态：
1、叠加层；
2、海拔变化；
3、颜色状态变化；
4、显示额外的图标（如选中图标）
5、显示辅助信息（如错误提示）
交互设计 · 第 12 讲预告
👉 设计师如何做需求分析👈
悦姐1月组建了【交互小课堂】
每周日晚8:00，腾讯会议开讲文章拓展知识，并免费解答大家的交互设计疑问。
系列课程20堂+，帮助大家交互设计从入门到专业。
前100名限时特价199元加入，101~200名限时定价299元。
有需要的小伙伴请添加悦姐微信yuechats，备注【交互小课堂】
我是悦姐，一个爱学习和分享的设计专家~
欢迎关注，2022年和悦姐一起交互进阶~